<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>Faeple</title>
    
    <link href="/resources/css/bootstrap.css" rel="stylesheet">
    <link href="/resources/css/global-style.css" rel="stylesheet">
    <!--[if lt IE 9]>
		<script src="/resources/js/html5shiv.js"></script>
		<script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <link href='http://fonts.googleapis.com/css?family=Alef' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/resources/css/font-awesome.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
    <style type="text/css">
    	body {
    		font-family:"나눔고딕",NanumGothic,"맑은 고딕","Malgun Gothic","Apple SD Gothic Neo","돋움",dotum,Arial,sans-serif;
			font-size:14px;
			line-height:1.428571429;
			color:#333;
			background-image: url("/resources/img/bg.gif");
		}
		.result-top-menu{
			width: 100%;
			height: 60px;
			position: relative;
			overflow: hidden;
		}
		.result-top-menu .result-line{
			position: absolute;
			top: 30px;
			left: 0;
			width: 100%;
			height: 2px;
		}
		.result-top-menu .result-count{
			color: #8d8d8d;
			margin-top: 20px;
			float: left;
			text-shadow: 1px 1px 0px rgba(255,255,255,1);
		}
		.result-top-menu .result-right-button{
			margin-top: 15px;
			float: right;
		}
		.result-top-menu .result-right-button button{
			border: 1px solid #ccc;
			border-radius: 4px;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
			background-color: #ebebeb;
			background: linear-gradient(#fff, #f0f0f0);
			padding-top: 6px;
			padding-bottom: 6px;
			padding-left: 10px;
			padding-right: 10px;
			color: #8d8d8d;
			text-shadow: 1px 1px 0px rgba(255,255,255,1);
			font-size: 13px;
		}
    </style>
</head>

<body>
<div id="viewport">
<div id="page">
<!-- header -->
<%@ include file="head.jsp" %>
<!-- header -->

<!-- content -->
<div class="container" style="margin: 10px auto;">
	<h2>이벤트</h2>
	<div class="result-top-menu">
		<div class="result-line"><div style="width:90px; height:2px; float:left;"></div><div style="margin:0 auto; overflow: hidden; height: 2px; background-color: #ddd; border-bottom: 1px solid #fff;"></div></div>
		<div class="result-count">신청인원 <span style="color: #58778f; font-weight: bold;" id="resultCount">${fn:length(events)}</span>명</div>
	</div>
</div> <!-- end container -->

<div class="container">
	<table class="table table-striped">
		<thead>
			<tr>
				<th>번호</th>
				<th>이름</th>
				<th>심사여부</th>
			</tr>
		</thead>
		<tbody>
			<c:if test="${fn:length(events) != 0}">
			<c:forEach items="${events}" var="item" varStatus="status">
				<tr>
					<td>${status.count}</td>
					<td>${item.name}</td>
					<td>
						<c:if test="${item.confirm == 'false'}">심사중...</c:if>
						<c:if test="${item.confirm == 'true'}">처리완료</c:if>
					</td>
				</tr>
			</c:forEach>
			</c:if>
			<c:if test="${fn:length(events) == 0}">
				<tr>
					<td colspan="3" style="text-align: center;">신청 인원이 없습니다</td>
				</tr>
			</c:if>
		</tbody>
	</table>
</div>

<div class="container">
	<div style="text-align: right;"><button type="button" data-toggle="modal" data-target="#event-modal" class="btn btn-primary">신청하기</button></div>
</div>

<!-- footer -->
<%-- <jsp:include page = "footer.jsp" flush="false"/> --%>
<!-- footer -->

<div class="modal fade" id="event-modal" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog" style="max-width: 550px;">
		<div class="modal-content">
			<div class="modal-header" style="border-bottom:0;padding-bottom:0;">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 28px;">×</button>
		        <h4>신청하기</h4>
			</div>
			<div class="modal-body">
			<form method="post" action="/event_submit">
				<p>이벤트 상품을 받으실 카카오톡 계정명 또는 핸드폰번호를 입력해주세요<p>
				<input type="text" id="kakao" name="kakao" class="form-control" placeholder="카카오톡 계정명 또는 핸드폰번호">
				<input type="hidden" id="member_idx" name="member_idx" value="${userDto.idx}">
				<input type="hidden" id="name" name="name" value="${userDto.name}">
				
				<p class="text-danger"><i class='fa fa-exclamation' style='color:#BF0000;'></i>&nbsp;신청하기전에 이벤트 참가조건을 충족시켰는지 다시 한번 확인해주세요<br>조건에 충족하지 못할시에는 경품이 지급되지 않습니다</p>
				<br>
				<button type="submit" class="btn btn-primary btn-block">신청하기</button>
			</form>
			</div>
			
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div><!-- end page -->
<%@ include file="commonScript.jsp" %>
</div><!-- end viewport --><script type="text/javascript">
	if("${userDto.idx}" == ""){
		alert('이벤트에 참여하려면 로그인이 필요합니다');
		location.href='/signup';
	}
   	
   	$().ready(function(){
   	}); // end document
</script>
</body>
</html>